// 弃用（递归时，主树枝长到最大高度前，分树枝会不断重置，不能长高，角度一直变。主树枝长到最大高度后，分树枝才会确定角度并长高）
import withData from '@/components/Trunk/withData.js'
import { Component } from 'react'

const data = {
  /*------------ 必填配置 ----------------*/
  growTimes: 5000, // 生长间隔时间
  rootIndex: 20, // 根树干倾斜系数
  notRootIndex: 180, // 非根树干倾斜系数
  /*------------ 可选配置 ----------------*/
  height: 1, // 初始长度
  maxWidth: 60, // 树干最大宽度配置
  trunkBottom: 0, // 树干生长距离地面高度
}

class TrunkTypeOne extends Component {
  render () {
    return (
      <div
        ref={this.props.el}
        onClick={this.props.cut}
        className={`TrunkTypeOne Trunk ${this.props.className ? this.props.className : ''} ${this.props.isRoot ? 'root' : ''}`}
        style={{
          '--trunk-height': this.props.height,
          '--trunk-rotate': this.props.rotate,
          '--trunk-maxWidth': this.props.maxWidth + 'px',
          '--grow-times': this.props.growTimes,
          '--trunk-bottom': this.props.isRoot ? 0 : this.props.trunkBottom,
          zIndex: this.props.isRoot ? 1 : 6 - this.props.level
        }}
      >
        {this.props.children}
      </div>
    )
  }
}

export default withData(TrunkTypeOne, data);